<template>
  <el-row class="s1" v-loading.fullscreen.lock="loading">
    <el-row class="cm">
      <el-form :inline="true">
        <el-form-item label="用户名">
          <el-input v-model="search.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="search.roleId" placeholder="请选择角色">
            <el-option v-for="item in roles" :key="item.roleId" :label="item.roleName" :value="item.roleId">
            </el-option>
          </el-select>
          <el-form-item label="状态">
            <el-select v-model="search.status" placeholder="请选择状态" clearable>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
      <div style="float: right;background-color: #fafafa;margin-bottom: 15px;">
        <el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button type="warning" icon="el-icon-edit" @click="handleEdit">编辑</el-button>
      </div>
      <el-table highlight-current-row :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" @row-click="handleCheckChange"
        stripe style="width: 100%">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="branchNameManager" label="商户类型">
          <template slot-scope="scope">
            <span>{{scope.row.partnerName===null||scope.row.partnerName.length===0?'总店':'分店'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="branchName" label="总店名称">
        </el-table-column>
        <el-table-column prop="partnerName" label="分店名称">
        </el-table-column>
        <el-table-column prop="roleName" label="角色">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status== 1" style="color: #11b95c">启用</span>
            <span v-else style="color: red">禁用</span>
          </template>
        </el-table-column>
      </el-table>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </el-row>

    <el-dialog :title="dialogType==='add'?'新增':'编辑'" custom-class="sys-dialog" width="600px" :close-on-click-modal="false" :visible.sync="openDialog"
      top="10vh" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <user-form v-if="openDialog" :type="dialogType" :user-info="selectUser" :user="user" :dropdown-option="dropdownOption" :roles="roles"
          @save-success="saveSuccess">
        </user-form>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
  import PermissionApi from 'services/permissionApi';

  import TablePagination from 'commonComponents/tablePagination';
  import UserForm from './userForm';

  import Pagination from 'models/pagination';
  import UserListSearch from 'models/permission/userListSearch';

  import loginUser from 'mixins/loginUser';

  export default {
    mixins: [loginUser],

    data() {
      return {
        loading: false,
        search: new UserListSearch(),
        pagination: new Pagination(),
        tableData: [],
        roles: [],
        multipleSelection: [],
        openDialog: false,
        selectUser: null,
        dialogType: '',
        dropdownOption: {}
      }
    },

    created() {
      this.loading = true;
      Promise.all([
        this.setRoles(),
        this.setUsersInfosList(false)
      ]).then(() => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },

    methods: {
      setRoles() {
        return PermissionApi.getRoleList().then(roles => {
          this.roles = roles;
          return roles;
        });
      },

      setUsersInfosList(hasLoading = true) {
        if (hasLoading) {
          this.loading = true;
        }

        return PermissionApi.getAllUser(this.search, this.pagination).then(tableData => {
          this.tableData = tableData;
          if (hasLoading) {
            this.loading = false;
          }
          return tableData;
        }).catch(() => {
          if (hasLoading) {
            this.loading = false;
          }
          return [];
        });
      },

      pageChange() {
        this.setUsersInfosList();
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      handleCheckChange(row, event, column) {
        if (row) {
          this.$refs.multipleTable.toggleRowSelection(row);
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

      operateTips(type, sl) {
        if (sl === 0) {
          this.$message({
            message: '请选择一个条目',
            type: 'warning'
          });
        } else if (sl === 1) {
          return true;
        } else {
          if (type === 'edit') {
            this.$message({
              message: '只能选择一个条目',
              type: 'warning'
            });
          } else if (type === 'del') {
            return true;
          }
        }
        return false;
      },

      handleEdit() {
        this.title = '编辑';
        if (!this.operateTips('edit', this.multipleSelection.length)) {
          return;
        }
        let row = this.multipleSelection[0];
        this.dialogType = 'update';
        this.selectUser = row;
        this.openDialog = true;
      },

      handleAdd() {
        this.dialogType = 'add';
        this.openDialog = true;
      },

      saveSuccess() {
        this.openDialog = false;
        this.setUsersInfosList();
      },

      dialogClosed() {
        this.dialogType = '';
        this.selectBranch = null;
      },

      queryList() {
        this.pagination.currentPage = 1;
        this.setUsersInfosList();
      }
    },

    components: {
      TablePagination,
      UserForm
    }
  }

</script>

<style scoped>
  .cm {
    width: 98%;
    margin-top: 15px;
    margin-left: 1%;
  }

  .s1 {
    width: calc(100% - 5px);
    height: 100%;
    background-color: #f1f3f4;
    padding-bottom: 5px;
    overflow: auto;
  }

</style>
